@charset "UTF-8";
@import "common.scss";

header{
  height: r(123);
  //padding-top: r(48);
  div{
    width: r(706);
    margin: 0 auto;
    div{
      text-align: center;
      font-family: 微软雅黑;
      font-size: px(26);
      line-height: r(51);
    }
    .back{
      float: left;
      width: r(117);
      height: r(51);
      border: 1px solid #ff9344;
      text-align: center;
      border-radius: 15px;
      a{
        color: black;
        font-family: 微软雅黑;
        font-size: px(26);
        line-height: r(51);
        font-weight: normal;
      }
    }
    .selectBar{
      float: right;
      margin-top: 0;
      select{
        line-height: r(51);
      }
    }
  }
}

.content{
  width: 100%;
  position: absolute;
  top: 75px;
  bottom: px(136);
  left: 0;
  right: 0;
  // 纵向滚动
  overflow-y: scroll;
  // 弹性滚动
  -webkit-overflow-scrolling: touch;
  .title{
    margin: r(33) r(21) 0 r(21);
    .titleName{
      float: left;
      height: r(46);
      img{
        width: r(32);
      }
      span{
        font-family: 微软雅黑;
        font-size: px(30);
        line-height: r(46);
        vertical-align: text-top;
      }
    }
    .titleMore{
      float: right;
      a{
        font-family: 微软雅黑;
        font-size: px(24);
        color: black;
        span{
          padding-right: r(8);
        }
        i{
          font-size: r(26);
          color: #ff9344;
        }
      }
    }
  }
  .searchBar{
    width: r(265);
    height: 25px;
    border: 1px solid #ff9344;
    border-radius: 25px;
    margin: 0 auto;
    font-size: 0;
    padding: 0 5px;
    box-sizing: border-box;
    input{
      display: inline-block;
      vertical-align: middle;
      border: none;
      width: calc(100% - 24px);
      height: 100%;
      text-align: center;
      font-size: px(24);
      font-family: 微软雅黑;
    }
    img{
      vertical-align: middle;
      width: 18px;
      height: 18px;
    }
  }
  .searchDiv{
    width: r(516);
    margin: 0 auto;
    text-align: center;
    p{
      font-size: px(20);
      font-family: 微软雅黑;
      margin: r(30) 0 r(14) 0;
    }
    .searchAll{
      .searchBox{
        float: left;
        width: r(125);
        height: r(64);
        line-height: r(64);
        background-color: #dcdcdc;
        text-align: center;
        font-size: px(20);
        font-family: 微软雅黑;
        margin: 0 r(4) r(3) 0;
        a{
          color: #898989;
        }
      }
    }
  }
  .hot{
    .hotBox{
      width: r(710);
      margin: r(30) 0 0 r(23);
      div{
        border: r(1) solid #cccccc;
        float: left;
        &:nth-of-type(1){
          width: r(280);
          height: r(352);
          margin-right: r(5);
        }
        &:nth-of-type(2){
          width: r(420);
          height: r(147);
          margin-bottom: r(6);
        }
        &:nth-of-type(3){
          width: r(195);
          height: r(197);
          margin-right: r(11);
        }
        &:nth-of-type(4){
          width: r(211);
          height: r(197);
        }
        img{
          width: 100%;
        }
      }
    }
  }
  .recommend{
    .title{
      .titleName{
        img{
          width: r(41);
        }
      }
    }
    .recommendImg{
      width: r(710);
      margin: r(45) auto 0 auto;
      .recommendBox{
        float: left;
        border: 1px solid #cccccc;
        height: r(200);
        &:nth-of-type(1){
          width: r(226);
          margin-right: r(20);
        }
        &:nth-of-type(2){
          width: r(209);
          margin-right: r(18);
        }
        &:nth-of-type(3){
          width: r(220);
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}